<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>

<body>
    <!--  
        表单是让用户输入的重要途径，表单分为两部分：1、表单域 2、表单控件
        # 表单域: 包含表单的区域，重点是 form标签
        # 表单控件: 输入框、提交按钮等 重点是 input标签
        @ form 标签,和网络编程/服务器后端编程有关 
            #属性: action 后端服务器访问的路径 
            #属性: method 前端请求后端的方式，入get和post
        @ input 标签
            # type属性 
                1、text 表示文本框
                2、password 表示密码框
                3、radio 表示单选框，注意要让多个 #name属性的值一致,才可以实现多个中单选一个 #checked属性，表示给一个默认选择
                4、checkbox 表示复选框
                5、button 表示普通的按钮 value 表示按钮的内容 这个和JS搭配使用
                6、submit 表示提交按钮 value 默认为提交 -> 点击完成之后会提交到服务器
                7、reset  表示重置按钮 value 默认为重置 -> 点击完成之后同一form域中的所有*框 都会清空
                8、file   表示选择文件 
        @ lable 标签
            # for 属性 配合 input 标签中的 id 属性使用(for的值必须等于id的值才有可以)，提升用户体验，例如点击按钮对应的文字，就像等于点击了对应的按钮
        @ select 标签 -> 下拉标签
            # option 标签，下拉标签中的每一项 可以使用 selected 属性，设置默认选项
        @ textarea 标签，大型的文本输入框
            # cols 属性，表示文本框的列
            # rows 属性，表示文本框一次显示的最大行数，超过会增加一个滚轮(右侧)
        @ 无语义标签 div 和 span
            @ div 独占一行，像一个大盒子，里面可以放以前学过的所有标签，包括span
            @ span 不独占一行，像一个小盒子
    -->
    <form action="#" >
        姓名<input type="text">
        <br/>
        密码<input type="password">
        <br/>
        性别<input type="radio" name="gander">男
            <input type="radio" name="gander">女
            <input type="radio" name="gander" checked="checked">保密
        <br/>
        爱好<input type="checkbox">刷美女
            <input type="checkbox">打游戏
            <input type="checkbox">写代码
            <input type="checkbox">写博客
        <br/>
        <input type="button" value="这是一个按钮" onclick="alert('你好cp')"> 
        <input type="submit" value="提交">
        <input type="reset">
        <input type="file">
        <br/>

        <label for="man">男</label>
        <input type="radio" name="gander" id="man">
        <label for="men">女</label>
        <input type="radio" name="gander" id="men">
        <br/>
        <select>
            <option value="">--请选择省份--</option>
            <option value="" selected="selected">北京</option>
            <option value="">上海</option>
        </select>
        <br/>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <br/>
        <div>
            <div>吃饭</div>
            <div>睡觉</div>
            <div>学习</div>
        </div>
        <div>
            <span>吃饭</span>
            <span>睡觉</span>
            <span>学习</span>
        </div>
    </form>
</body>

</html>